import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {Map, List, OrderedSet} from 'immutable';

import {Button, Row, Col, Select} from 'antd';
const Option = Select.Option;
import Image from 'components/Image';

import Sku from './sku-item';
import Spu from './spu-item';
import SearchSelect from 'components/search-select';
import Page from './page';
import Cart from './cart';
import Empty from './empty';

import noop from 'util/noop'
import { defaultAvatorImage } from 'constant/image.js'

@Relax
export default class ChooseGoods extends Component {
    static defaultProps = {
        chooseUser: Map(),
        goodsList: List(),
        chooseGoods: OrderedSet(),
        goodsSearch: Map(),
        changeGoodsPagination: noop,
        resetGoodsPagination: noop,
        setGoodsSearchValue: noop,
        setGoodsShowType: noop,
        queryGoodsList: noop,
        setGoodsShowType: noop,
        setStep: noop,
        previous: noop
    }


    componentDidMount() {
        this.sizeGoodItem();
        $(window).resize(()=> {
            this.sizeGoodItem();
        });
    }

    componentDidUpdate(){
        this.sizeGoodItem();
    }


    /**
     * 定义商品Item尺寸
     */
    sizeGoodItem(){
        let goodsList = $("#goodsList");
        let W = goodsList.find(".good-img").eq(0).width();
        goodsList.find(".good-img").height(W);
    }


    render() {
        const {chooseUser, chooseGoods, goodsList} = this.props;

        return (
            <div>
                {this.renderTopBar()}
                <div className="add-goods">
                    <div className="col-left">
                        {
                            goodsList.isEmpty() ? <Empty/> : this.renderGoodsList()
                        }
                    </div>
                    <div className="col-right">
                        <div className="selected-user">
                            <div className="inline-blk">
                                <b className="font-16 lh36">客户：</b>
                            </div>
                            <div className="user-card inline-blk">
                                <div className="avatar">
                                    <Image src={chooseUser.get('jsonInfo') || defaultAvatorImage} auto={true}/>
                                </div>
                                <div className="user-info">
                                    <p>
                                        <span className="mr10"><span>会员编号：</span><span>{chooseUser.get('userId')}</span></span>
                                    </p>
                                    <p>
                                        <span className="name mr10" title={chooseUser.get('nickName')}><span>会员登录名：</span><span>{chooseUser.get('nickName')}</span></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <Cart/>
                    </div>
                </div>
                <div className="fixedSubmit">
                    <div className="t-center">
                        <Button type="ghost" onClick={this.previous}>取消</Button>
                        <Button type="primary pushl" disabled={chooseGoods.isEmpty()} onClick={()=>this.setStep()}>下一步提交订单</Button>
                    </div>
                </div>
            </div>
        )
    }

    previous = ()=>{
        this.props.previous('user');
    }


    renderTopBar() {
        const {goodsSearch} = this.props;

        return (
            <div className="top-bar">
                <Row>
                    <Col span={12}>
                        <div className="inline-blk">
                            <b className="font-16 lh36"><span className="step-num">2</span>选择商品：</b>
                        </div>
                    </Col>
                    <Col span={12}>
                        <Row gutter={12}>
                            <Col span={6} offset={6}>
                                <Select defaultValue="SKU"
                                        className="percent100"
                                        size="large"
                                        value={goodsSearch.get('showType')}
                                        onChange={(value)=>this.changeShowType(value)}>
                                    <Option value="sku">SKU商品展示</Option>
                                    <Option value="spu">SPU商品展示</Option>
                                </Select>
                            </Col>
                            <Col span={12}><SearchSelect placeholder="请输入商品名称／商品编码"
                                                         size="large"
                                                         onSearch={(value)=>this.onSearch(value)}/></Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        )
    }


    changeShowType(value) {
        this.props.setGoodsShowType(value);
        this.props.resetGoodsPagination();
        this.queryGoods();
    }


    renderGoodsList() {
        const height = window.innerHeight - 252 - 40 - 12 - 48 + 72 - 10;
        const {goodsList, chooseGoods, goodsSearch}  = this.props;
        return (
            <div>
                <Row className="goods-list" id="goodsList" style={{height: `${height}px`}}>
                    {
                        goodsList.map((goods, index)=>{
                            if (goodsSearch.get('showType') === 'sku') {
                                return <Sku key={index} sku={goods}/>
                            }
                            return <Spu key={index} spu={goods}/>;
                        })
                    }
                </Row>
                <Page pagination={goodsSearch.get('pagination')}
                      changePageNum={(pageNum)=>this.changePageNum(pageNum - 1)}
                      changePageSize={(current, pageSize)=>this.changePageSize(current, pageSize)}/>
            </div>
        )
    }


    /**
     * 搜索查询
     * @param value
     */
    onSearch(value) {
        this.props.setGoodsSearchValue(value);
        this.changePageNum(0);
    }


    /**
     * 分页
     * @param pageNum
     */
    changePageNum(pageNum) {
        this.props.changeGoodsPagination({pageNum});
        this.queryGoods();
    }


    /**
     * 展示页数
     * @param current
     * @param pageSize
     */
    changePageSize(current, pageSize) {
        this.props.changeGoodsPagination({pageNum: 0, pageSize});
        this.queryGoods();
    }


    /**
     *查询商品
     */
    queryGoods() {
        this.props.queryGoodsList()
    }


    setStep() {
        this.props.setStep('create');
    }
}